<template>
  <section >
    <!--操作区域-->
    <el-row v-show="!param.isOnlyPrintForm">
      <el-col :span="24">
        <strong>设置说明：</strong>目前仅支持保留您前次所做设置，
        <br>
        <strong>宽高及页数换算：</strong>单位:毫米，支持类型：ISO216(A/B/C系列 0-10),JIS(B系列 0-9)
        <br>
        <span  style="color:#e6a23c">
          打印预览窗口同时只允许出现一个，若出现打印异常，您可以自行调整宽高
        </span>
        <br>
        <span  style="color:#e6a23c">
          三联纸：宽243，高135，纵向打印
        </span>
      </el-col>
    </el-row>
    <el-row style="    padding: 11px 0px;" v-show="!param.isOnlyPrintForm">
      <el-col :span="12">
        <el-button style="width: 80px;">打印机:</el-button>
        <el-select ref="printer" v-model="printerSelId" filterable  placeholder="请选择" @change="selectChange" style="    width: 200px;">
          <el-option
            v-for="item in printers"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-button style="width: 80px;">打印方向:</el-button>
        <el-select ref="printerOrient" v-model="printerSelOrient" filterable  placeholder="请选择" @change="selectOrientChange" style="    width: 220px;margin-right: 11px">
          <el-option label="纵向打印，固定纸张" value="1"  key="1"></el-option>
          <el-option label="横向打印，固定纸张" value="2" key="2"></el-option>
          <el-option label="纵向打印，高度自适应" value="3" key="3"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row  style="    padding: 11px 0px;" v-show="!param.isOnlyPrintForm">
      <el-col :span="6">
        <el-button style="width: 80px;">纸张:</el-button>
        <el-select ref="printerPage" v-model="printerSelPage" filterable  placeholder="请选择" @change="selectPageChange" style="width: 80px;">
          <el-option
            v-for="item in printer.pagelist"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="16">
        <el-button style="width: 60px;">宽度:</el-button>
        <el-input ref="printerPageWidth"  placeholder="0-9999" v-model="printerPageWidth" type="number" maxlength="4" style="width: 70px;margin-right: 11px"></el-input>

        <el-button style="width: 60px;">高度:</el-button>
        <el-input @change="printerPageHeightChange"  placeholder="0-9999" v-model="printerPageHeight" type="number" maxlength="4" style="width: 70px;margin-right: 11px"></el-input>

        <el-button v-show="!cpIsStaticHtml" style="width: 80px;">每页数量:</el-button>
        <el-input v-show="!cpIsStaticHtml" placeholder="0-100" v-model="printerPageSize" type="number" maxlength="3" style="width: 70px;"></el-input>
        <el-checkbox v-show="cpIsStaticHtml" v-model="showPre" style="width: 80px">显示预览</el-checkbox>
      </el-col>
    </el-row>
    <el-row  style="    padding: 11px 0px; text-align: center" v-show="!param.isOnlyPrintForm && !cpIsStaticHtml">
      <el-col :span="24">
        <el-checkbox  v-model="titleEveryPage" style="width: 90px">每页显示标题</el-checkbox>
        <el-checkbox v-model="headEveryPage" style="width: 90px">每页显示表头</el-checkbox>
        <el-checkbox v-model="footEveryPage" style="width: 90px">每页显示表尾</el-checkbox>
        <el-checkbox  v-model="fillBlank" style="width: 80px">填充空白行</el-checkbox>
        <el-checkbox v-model="showPre" style="width: 80px">显示预览</el-checkbox>
      </el-col>
    </el-row>
    <el-row  style="    padding: 11px 0px;text-align: center;">
      <el-col :span="22">
        <el-button ref="btnPrint" v-show="!param.isSet && !param.isOnlyPrintForm"  @click="print(false)" type="primary"  >打印</el-button>
        <el-button ref="btnView"  v-show="!param.isSet  && !param.isOnlyPrintForm"   @click="print(true)" type="primary"  >预览</el-button>
        <el-button  @click="utils.downloadStatic('exe', 'CLodop_Setup_for_Win32NT')"   >下载客户端</el-button>
        <el-button  @click="close" >关闭</el-button>
      </el-col>
    </el-row>

    <!--打印区域-->
    <div ref="printBox" id="printBox" :class="{'print-box': true, 'print-box-view': param.isView || showPre}">

      <!--新版打印配置列表-->
      <div remark="打印配置总容器" v-for="(config, indexroot) in configList" :key="indexroot">
        <!--每个打印列表分别分单打印-->
        <div remark="单个打印配置容器" v-for="(tableData, index9) in config.tableDatas" :key="index9">
          <div remark="单个打印配置容器" class="dataTableBox"
               v-for="(pageNum,index0) in Math.ceil(tableData.length/printerPageSize)" :key="index0"
               :style="{paddingTop:'9px',width: printerPageWidth * mmRatePx + 'px'}">
            <!--标题-->
            <div   class="title" :style="getTitleStyle(config)">
              {{getTitle(config.printTemplate.configJson.title, config)}}
            </div>

            <!--子标题-->
            <div v-if="showSubTitle(pageNum, config)" class="subtitle" :style="getSubTitleStyle(config)">
              {{getSubTitle(tableData[0], config)}}
            </div>

            <!--页码-->
            <table class="title" :style="getPageStyle(pageNum)">
              <tr>
                <td style="text-align: left; padding-left: 11px; font-size: 11px">
                  <span
                    v-if="strings.isNotBlank(config.formData.snum)  && config.formData.snum !=0">序列号：{{strings.defaultString(config.formData.snum,'')}}</span>
                </td>
                <td style="text-align: right; padding-right: 66px">
                  <span>{{getPageValue(pageNum, tableData, config)}}</span>
                </td>
              </tr>
            </table>

            <!--条码-->
            <div v-if="showBarcode(pageNum, config)" style="text-align:left;width:100%;">
              <span :key="ob.name"
                    v-for="(ob, index) in config.barcodes.filter(barcode => !barcode.flagShareRow)"
                    :style="getHeadFootColStyle(ob, null, config)">
                <FortenCode :propType="ob.type"
                            :propValue="config.formData[ob.name]"
                            :propText="ob.text"
                            :propHeight="(ob.shareRow || 2) * 20"
                            :propWidth="ob.type == 'qrcode' ? 40 : null"
                            propDisplayValue="true"
                            style="text-align: center;"
                />
              </span>
            </div>

            <!--表头 共享行-->
            <!--barcode与表头共享部分-->
            <div :key="alignType" v-if="showShareRows(pageNum, alignType, config)" v-for="alignType in ['left','right']" :style="getShareBarCodeStyle(alignType, config)">
              <span :key="ob.name" v-for="(ob, index) in config.barcodes.filter(barcode => barcode.flagShareRow && barcode.alignType == alignType)">
                <FortenCode :propType="ob.type"
                            :propValue="config.formData[ob.name]"
                            :propText="ob.text"
                            :propHeight="40"
                            :propWidth="ob.type == 'qrcode' ? 40 : null"
                            propDisplayValue="true"
                            style="text-align: center;"
                />
              </span>
            </div>
            <div class="head"  v-if="(headEveryPage || pageNum == 1) && config.head && config.head.filter(ob => ob.flagShareRow).length > 0" :style="getShareRowHeadStyle(ob, config)">
              <span :key="ob.name" v-for="(ob, index) in config.head.filter(ob => ob.flagShareRow)" :style="getHeadFootColStyle(ob, index, config)">
                <span :style="getHeadFootColLabelStyle(ob, index, config)">{{getHeadLabel(ob, config)}}</span>
                <span :style="getHeadFootColValueStyle(ob, index, config)" v-if ="ob.formation != upDown">{{getHeadFootValue(ob, config)}}</span>
                <hr v-if="ob.formation == upDown && config.printTemplate.configJson.flagHeadBorder" />
                <span :style="getHeadFootColLabelStyle(ob, index, config)" v-if="ob.formation == upDown">{{getHeadFootValue(ob, config)}}</span>
              </span>
            </div>

            <!--表头 不共享行-->
            <div class="head"  v-if="(headEveryPage || pageNum == 1) && config.head && config.head.filter(ob => !ob.flagShareRow).length > 0" :style="getHeadStyle(ob, config)">
            <span :key="ob.name" v-for="(ob, index) in config.head.filter(ob => !ob.flagShareRow)" :style="getHeadFootColStyle(ob, index, config)">
              <span :style="getHeadFootColLabelStyle(ob, index, config)">{{getHeadLabel(ob)}}</span>
              <span :style="getHeadFootColValueStyle(ob, index, config)" v-if="ob.formation != upDown">{{getHeadFootValue(ob, config)}}</span>
              <hr v-if="ob.formation == upDown && config.printTemplate.configJson.flagHeadBorder" />
              <span :style="getHeadFootColLabelStyle(ob, index, config)" v-if="ob.formation == upDown">{{getHeadFootValue(ob, config)}}</span>
            </span>
            </div>

           <!--

            &lt;!&ndash;子标题&ndash;&gt;


            &lt;!&ndash;页码&ndash;&gt;


            &lt;!&ndash;条码&ndash;&gt;

            &lt;!&ndash; float 隔断&ndash;&gt;
            <div style="float: left; width: 100%;"></div>

            &lt;!&ndash;barcode与表头共享部分&ndash;&gt;


            &lt;!&ndash;表头&ndash;&gt;
            <div class="head"
                 v-if="(headEveryPage || pageNum == 1) && param.head && param.head.filter(ob => !ob.flagShareRow).length > 0"
                 :style="getHeadStyle(ob)">
              <span :key="ob.name" v-for="(ob, index) in param.head.filter(ob => !ob.flagShareRow)"
                    :style="getHeadFootColStyle(ob, index)">
                <span :style="getHeadFootColLabelStyle(ob, index)">{{getHeadLabel(ob)}}</span>
                <span :style="getHeadFootColValueStyle(ob, index)" v-if="ob.formation != upDown">{{getHeadFootValue(ob)}}</span>
                <hr v-if="ob.formation == upDown && param.flagHeadBorder"/>
                <span :style="getHeadFootColLabelStyle(ob, index)" v-if="ob.formation == upDown">{{getHeadFootValue(ob)}}</span>
              </span>
            </div>-->

            <!--数据区域-->
            <table class="dataTable" :style="getDataTableStyle()" v-if="!param.onlyForm">
              <thead class="dataTableHead">
              <tr>
                <th style="width: 30px;">
                </th>
                <th
                  style="width: 30px;text-align: center;border:1px solid black; font-size: 12px; font-weight: bold"
                  v-if="!noPrintSeq">
                  <span>序号</span>
                </th>
                <th :style="getDataTableHeadThStyle(column, config)" v-for="column in config.columns"
                    :key="column.name">
                  <span> {{utilFieldMap.show(column.name,column.title,'print') }}</span>
                </th>
              </tr>
              </thead>
              <tbody class="dataTableBody">
              <tr v-for="(row,index) in tableData" :key="index" style="height:25px"
                  v-if="index>=(pageNum-1)*printerPageSize && index<pageNum*printerPageSize">
                <td>
                </td>
                <td v-if="row.index != '合计' &&  !noPrintSeq"
                    style="text-align: center;border:1px solid black;font-size: 12px; ">
                  <span>{{index+1}}</span>
                </td>
                <td v-else-if="!noPrintSeq"
                    style="text-align: right;font-weight: bold;border:1px solid black;font-size: 12px; ">
                  <span>{{row.index}}</span>
                </td>
                <td v-for="column in config.columns" :key="column.name"
                    :style="getDataTableBodyTdStyle(row, column)">
                  <span v-if="column.datePattern ">{{ dates.formatToAnotherPattern(row[column.name], column.datePattern)}}</span>
                  <span v-else>{{getValue(column, row, tableData)}}</span>
                </td>
              </tr>

              <!--小计-->
              <tr class="sum" v-if="showSubTotal(config)">
                <td style="text-align: right;font-size: 12px; font-weight: bold ">
                  <span style="margin-right: -28px;">小计</span>
                </td>
                <td v-if="!noPrintSeq " style="border:1px solid black;font-size: 11px;">
                </td>
                <th v-for="column in config.columns" :key="column.name"
                    style="text-align: center;font-weight: bold;border:1px solid black;font-size: 12px;">
                  <span>{{getTotal(column, pageNum, tableData, true, config)}}</span>
                </th>
              </tr>
              <!--合计-->
              <tr class="sum" v-if="showTotal(pageNum, tableData)">
                <td style="text-align: right;font-size: 12px; font-weight: bold ">
                  <span style="margin-right: -28px;">合计</span>
                </td>
                <td v-if="!noPrintSeq " style="border:1px solid black;font-size: 11px;">
                </td>
                <th v-for="column in config.columns" :key="column.name"
                    style="text-align: center;font-weight: bold;border:1px solid black;font-size: 12px;">
                  <span>{{getTotal(column, pageNum, tableData, false, config)}}</span>
                </th>
              </tr>
              </tbody>
            </table>

            <!--表尾部-->
            <div class="foot"
                 v-if="(footEveryPage || pageNum == Math.ceil(tableData.length/printerPageSize))  && config.foot && !config.onlyForm"
                 style="padding-top: 8px; text-align: left; margin-left: 2%">
              <span :key="ob.name" v-for="ob in config.foot" :style="getHeadFootColStyle(ob, null, config)">
                <span :style="getHeadFootColLabelStyle(ob,null, config)">{{getHeadLabel(ob, config)}}</span>
                <span :style="getHeadFootColValueStyle(ob, config)">{{getHeadFootValue(ob, config)}}</span>
              </span>
            </div>

            <!--表尾 html-->
            <div class="foot" v-if="(footEveryPage || pageNum == 1)  && config.footHtml" v-html="config.footHtml" style="padding-top: 8px; text-align: center">
            </div>
            <!--二维码数组信息-->
            <div  v-if="config.flagCodeInfo">
              <div :key="ob.text" v-for="ob in config.barCodeInfo" :style="getFootBarCodeColStyle(ob, config)" >
                <!--右侧图形码-->
                <FortenCode
                  :propType="ob.type"
                  :propValue="ob.itemOrder"
                  :propText="ob.text"
                  :propHeight="200"
                  :propWidth="200"
                  :propDisplayText="true"
                  style="text-align: center; padding-right: 66px"
                >
                  ></FortenCode>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--静态html-->
      <div v-if="cpIsStaticHtml" v-html="cpStaticHtml"></div>
    </div>
  </section>
</template>


<script>
/*eslint-disable*/
import pfFunIndex from '../../util/core/printform/funIndex.js'
import {getLodop} from '@/util/lodop/LodopFuncs.js'
import LodopModel from '@/util/lodop/LodopModel.js'
import FortenCode from '@/components/common/FortenCode.vue'
export default {
  name: 'printForm',

  /*
  * 参数格式
{
  viewForm: viewForm, 				//当前调用对象
  isSet: true, 						// true:工作台打印设置
  printAuto: false, 				// true:自动打印
  fromConfig: false, 				// true:来自于打印配置

  configList: [  						//打印配置，可以多个
	{
		//打印配置
		printbusType: '', 			//打印业务类型，来源print_template.bus_type,

		//主单据数据或者数据查询配置
		formData: null,				//数据对象
		fromDataId:null,

		//明细网格数据或者数据查询配置
		itemDataQueryWrapper: null,	//数据查询参数
		itemDataOrderWrapper: null,	//数据排序参数，可以为空
	}

  ]
}
  */
  props: ['param'],
  components: {FortenCode},
  data() {
    return {
      //表格数据
      tableDatas: [],
      //表格列
      columns: [],
      noPrintSeq: false,
      //Lodop实例,单例
      userLodopModel: null,

      //所选打印机
      printerSelId: null,
      printer: {},
      printers: [],

      //打印服务器
      printerServers: [],
      printerServer: {},
      printerServerSelId: null,
      printType: 'form',

      //界面所设置的属性
      printerSelPage: 'A4',
      printerSelOrient: '1',
      printerPageSize: 20,
      printerPageWidth: 210,
      printerPageHeight: 297,
      headFootColLabelMax: null,
      sumPageNum: 0,
      titleEveryPage: true,
      headEveryPage: true,
      footEveryPage: true,
      fillBlank: false,
      showPre: false,
      paperSizeMapNames: '',
      //毫米跟像素的换算比率,基本上 1毫米 约等于 3.78像素，此处取整
      mmRatePx: 3.78,

      //数据是否成功加载过一次
      dataLoadOnceSuccess: false,
      isPrint: true,
      printAuto: false,
      columnAllWidth: 0,

      tableDataBreakArr: [],
      pagebreakVlaues: [],
      pageNum: 1,
      upDown: 'upDown',
      currentUser: {},
      printInstall: true,
      alignType: {
        left: 'left',
        center: 'center',
        right: 'right'
      },


      /*打印配置列表【内置】
      */
      configList: [],
    }
  },
  computed: {
    cpBreak() { //是否分单
      return this.tableDataBreakArr.length > 0
    },
    cpExpressionMap() {
      let map = []
      map.push({key: 'getUserName', value: this.currentUser.name})
      map.push({key: 'getDate', value: new Date().format(this.dates.defaultDatePattern)})
      map.push({key: 'getTime', value: new Date().format(this.dates.defaultDateTimePattern)})
      map.push({key: 'getDeptName', value: this.currentUser.deptName})
      map.push({key: 'getWareName', value: this.utils.getCurrentWarehouse().warehouseName})
      return map
    },
    // 是否显示静态html
    cpIsStaticHtml() {
      return this.param && this.param.isStaticHtml && this.param.isStaticHtml == true
    },
    // 静态html
    cpStaticHtml() {
      if (this.param.staticHtml && this.param.staticHtml) {
        return this.param.staticHtml
      }
      return ''
    }
  },
  watch:{
    //参数变化后，进行初始化
   /* param:{
      handler(newValue, oldValue) {
        /!*let type = this.param.type
        if (!type || type != 'set') {
          this.isPrint = true
          if(!this.param || !this.param.dvParam) {
            this.utilMessage.warning('缺少参数【dvParam】')
            return
          } else if((!this.param.dvParam.totalResult || this.param.dvParam.totalResult <1) && !this.param.onlyForm) {
            this.utilMessage.warning('没有可打印的数据')
            return
          }
          if (this.param.watchOnce) return
          this.param.watchOnce = true
        } else {
          this.isPrint = false
          this.printType = this.param.printType
        }*!/
        /!*if (this.initConfig()) {
          // this.initPrintOnce()
        }*!/
      },
      deep: true,
      immediate: true
    }*/
  },

  methods: pfFunIndex.inst()
}
</script>

<style lang="scss" scoped>
  .container{
    padding: 5px;
  }
  .print-box {
    border: 3px dotted #1890FF;
    overflow-x: auto;
    position: absolute;
    top: -999999999px;
  }

  .print-box-view {
    position: relative !important;
    top: 0px !important;
  }
</style>
